<template>
  <view class="register-container pos-r bg-whi hp-100">
    <image class="pos-a t-0 l-0 wp-100 h-600 z-0" src="/static/images/bg.png" alt="" />
    <view class="main d-f fd-c wp-100">
      <view class="header ta-c mb-60 mt-100">
        <text class="title fs-48 fw-7 c-333 d-b mb-20">酷游宝</text>
        <text class="subtitle fs-32 c-666">注册账号</text>
      </view>
      <view class="form-container p-40 bg-whi mt-80 br-32 wp-100">
        <view class="mb-32">
          <text class="label fs-28 c-666 mb-10 d-b">昵称</text>
          <u-input class="u-input-custom" v-model="nickName" placeholder="请输入昵称" maxlength="20" border="surround" />
        </view>
        <view class="mb-32">
          <text class="label fs-28 c-666 mb-10 d-b">手机号</text>
          <u-input class="u-input-custom" v-model="phoneNumber" type="number" placeholder="请输入手机号" maxlength="11" border="surround" />
        </view>
        <view class="mb-32">
          <text class="label fs-28 c-666 mb-10 d-b">验证码</text>
          <view class="verification-code d-f ai-c jc-b">
            <u-input class="u-input-custom wp-65" v-model="verifyCode" type="number" placeholder="请输入验证码" border="surround" />
            <view class="wp-30 ml-10">
              <u-button class="wp-100" :disabled="countdown > 0" type="primary" color="#fea20d" @tap="getVerificationCode">
                {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
              </u-button>
            </view>
          </view>
        </view>
        <view class="mb-32">
          <text class="label fs-28 c-666 mb-10 d-b">设置密码</text>
          <u-input class="u-input-custom" v-model="password" type="password" placeholder="请设置6-20位密码，包含字母和数字" :password-icon="true" border="surround" />
        </view>
        <view class="mb-32">
          <text class="label fs-28 c-666 mb-10 d-b">确认密码</text>
          <u-input class="u-input-custom" v-model="confirmPassword" type="password" placeholder="请再次输入密码" :password-icon="true" border="surround" />
        </view>
        <u-button class="register-btn mt-32" type="primary" color="#fea20d" @tap="register" :disabled="loading" :loading="loading">注册</u-button>
        <view class="login-link ta-c fs-28 c-666 mt-32">
          <text>已有账号？</text>
          <text class="ml-5 c-yel" @tap="navigateToLogin">立即登录</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { debounce } from '@/utils/debounce';
export default {
  data() {
    return {
      nickName: '',
      phoneNumber: '',
      verifyCode: '',
      password: '',
      confirmPassword: '',
      countdown: 0,
      loading: false // 控制按钮是否禁用
    };
  },
  methods: {
    // 获取验证码
    async getVerificationCode() {
      if (!this.phoneNumber || this.phoneNumber.length !== 11) {
        this.$u.toast('请输入正确的手机号');
        return;
      }
      // 调用发送验证码API
      const res = await this.$request({ url: '/app/verifyCode/send', data: { phoneNumber: this.phoneNumber } });
      if (res.code === 200) {
        this.verifyCode = res.msg;
        this.$u.toast('验证码发送成功');
        this.startCountdown();
      } else {
        this.$u.toast(res.msg || '验证码发送失败');
      }
    },
    // 开始倒计时
    startCountdown() {
      this.countdown = 60;
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    // 注册 - 使用防抖函数防止重复点击
    register: debounce(async function () {
      if (!this.nickName) {
        this.$u.toast('请输入昵称');
        return;
      }
      if (!this.phoneNumber || this.phoneNumber.length !== 11) {
        this.$u.toast('请输入正确的手机号');
        return;
      }
      if (!this.verifyCode) {
        this.$u.toast('请输入验证码');
        return;
      }
      if (!this.password) {
        this.$u.toast('请设置密码');
        return;
      }
      if (this.password.length < 6 || this.password.length > 20) {
        this.$u.toast('密码长度应为6-20位');
        return;
      }
      // 密码强度校验
      const hasLetter = /[a-zA-Z]/.test(this.password);
      const hasNumber = /\d/.test(this.password);
      if (!hasLetter || !hasNumber) {
        this.$u.toast('密码需包含字母和数字');
        return;
      }
      if (this.password !== this.confirmPassword) {
        this.$u.toast('两次输入的密码不一致');
        return;
      }
      // 禁用按钮
      this.loading = true;
      try {
        // 调用注册API
        const res = await this.$request({ url: '/app/appUser/register', data: { nickName: this.nickName, phoneNumber: this.phoneNumber, verifyCode: this.verifyCode, password: this.password } });
        if (res.code === 200) {
          this.$u.toast('注册成功');
          await this.$async.delay(2000);
          uni.navigateTo({ url: '/pages/global/login/login' });
        } else {
          this.$u.toast(res.msg || '注册失败');
        }
      } catch (error) {
        console.error('注册失败:', error);
        this.$u.toast('注册失败，请重试');
      } finally {
        // 无论成功失败，都恢复按钮状态
        this.loading = false;
      }
    }, 500),
    // 跳转到登录页面
    navigateToLogin() {
      uni.navigateTo({ url: '/pages/global/login/login' });
    }
  }
};
</script>
<style scoped lang="scss">
.register-container {
  .main {
    position: absolute;
    height: 100%;
    padding-top: 60rpx;
    box-sizing: border-box;
    top: 0;
    left: 0;
  }
}
</style>
